<template>
	<view class="tbody">
		<!-- 已回复 -->
		<view class="dispose">
			<!-- 个人信息头像展示 -->
			<view class="dispose-message">
				<view class="dispose-message-left">
					<image :src="ip+data_info.avatar" mode=""></image>
				</view>
				<view class="dispose-message-center">
					<view class="center-one" style="line-height: 64rpx;">
						{{data_info.createName}}
					</view>
				</view>
				<view class="dispose-message-right">
					{{data_info.createTime}}
				</view>
			</view>
			<!-- 中间标题 -->
			<view class="headline">
				<!--          修复备注为空时 页面展示null-->
				{{data_info.remark === null ? '&nbsp;' : data_info.remark}}
			</view>

			<!-- 文章 -->
			<view class="article">
				<rich-text style="word-wrap:break-word; word-break:break-all;" class="ql-editor" :nodes="data_info.content"></rich-text>
				<view class="u-page" style="margin-top: 200rpx;">
					<view class="u-demo-block">
						<view class="u-demo-block__content">
							<view class="album">
								<view class="album__content">
									<u-album :urls="urls2"></u-album>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

	

		</view>

		<!-- 回复区域 -->
		<view class="helpBox">
			<text>回复内容：</text>
			<u--textarea style="color:rgba(20, 58, 64, 1);font-size: 24rpx;" v-model="data.responseContent"
				autoHeight="true" maxlength="500" :disabled=disabled></u--textarea>
		</view>
		<!-- 回复按钮 -->
		<view class="help" v-if="dispose==='0'" @click="submit" >
			回复
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				urls2: [], // 图片展示，图片路径放这里就行了
				ip: this.$store.state.user.URL,
				dispose: 0, // 1是已回复 0是未回复
				data_info: {
					id: 1
				},
				disabled: false, //输入框是否禁用
				data: {
					id: 1,
					responseContent:""
				}
			};
		},

		// 页面跳转携带过来的id
		onLoad(options) {
			// 赋值给准备好的变量
			this.data.id = Number(options.id)
		},
		onShow() {
			this.getAppelaDetail()
		},
		methods: {
			// 获取诉求详情
			async getAppelaDetail() {
				const res = await uni.$http.get(`/business/appeal/${this.data.id}`)
				if (res.data.code == 200) {
					
					this.dispose = res.data.data.state
					if (res.data.data.images === null) {
						// 没有返回图片，不处理
					} else {
						// 先将返回的图片转数组，然后回显
						const images = res.data.data.images.split(',')
						images.forEach(item=>{			
							// const urls = url+item
							this.urls2.push(this.ip+item)
						})
					}
					// 判断是否禁用输入框
					if (this.dispose === '1') {
						this.disabled = true
					}
					this.data_info = res.data.data
					this.data_info.content = this.data_info.content.replace(/src="/g,
						"style=\"width: 100%; height: 420rpx;\" src=\"" + this.ip);
					this.data_info.content = this.data_info.content.replace(/<\/p><p><img/g, '<img');
					this.data = res.data.data
				}
			},


			// 提交回复
			async submit() {
				// 判断回复是否未空			
				if (this.data.responseContent.length > 1) {
					const res = await uni.$http.put('/business/appeal/response', this.data)
					if (res.data.code == 200) {
						uni.showToast({
							title: '回复成功',
							icon: 'none'
						})
						this.dispose = '1'
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: '请输入回复内容',
						icon: 'none'
					})
				}



			}
		}

	}
</script>

<style lang="scss" scoped>
	::v-deep .u-page{
		margin-top: 20rpx !important;
	}
	.dispose {
		position: relative;
		opacity: 1;
		border-radius: 20rpx;
		background: #F2FDFF;
		box-shadow: 0px 0px 2rpx 0px #16C1DB;
		padding: 32rpx;
		margin-bottom: 32rpx;

		.dispose-message {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e6f1f3;
			margin-bottom: 24rpx;

			.dispose-message-left {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 60rpx;
				}
			}

			.dispose-message-center {
				width: 430rpx;

				.center-one {
					
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(20, 58, 64, 1);
					margin-bottom: 6rpx;
				}

				.center-two {
					font-size: 16rpx;
					font-weight: 400;
					color: #c3d1d4;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.dispose-message-right {
				font-size: 16rpx;
				font-weight: 400;
				color: #c3d1d4;

			}

		}

		.headline {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 58, 64, 1);
			margin-bottom: 32rpx;
		}

		.article {

			font-size: 24rpx;
			font-weight: 400;
			line-height: 18px;


			color: #c3d1d4;
			text-align: justify;
			vertical-align: top;

		}

	}

	.help {
		height: 88rpx;
		border-radius: 60rpx;
		background: #16C1DB;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 88rpx;
		color: rgba(235, 252, 255, 1);
		text-align: center;

	}

	.helpBox {}


	::v-deep .u-textarea {
		box-sizing: border-box;
		margin-top: 48rpx;
		min-height: 204rpx;
		border-radius: 20rpx !important;
		background: #F5FDFF !important;
		border: none !important;
		box-shadow: 0px 0px 2rpx 0px #16C1DB !important;
		padding: 24rpx;
		padding-bottom: 256rpx;
		margin-bottom: 64rpx;
	}

	::v-deep .u-textarea .data-v-09988a29 {
		background: #F5FDFF;
	}
</style>